<!DOCTYPE html>
<body>
<script src="../../resources/js-test.js"></script>
<script>
description("Test the return values for the font variant properties on the style object.")

var testContainer = document.createElement("div");
document.body.appendChild(testContainer);

testContainer.innerHTML = '<div id="testElement">hello</div>';
var style = testElement.style;
var computedStyle = getComputedStyle(testElement);

// We need all font longhands to build the shorthand.
shouldBeEqualToString("style.fontVariant", "");
shouldBeEqualToString("computedStyle.fontVariant", "normal");

style.fontVariantCaps = "small-caps";
shouldBeEqualToString("style.fontVariant", "");
shouldBeEqualToString("computedStyle.fontVariant", "small-caps");

style.fontVariantLigatures = "discretionary-ligatures";
shouldBeEqualToString("style.fontVariant", "");
shouldBeEqualToString("computedStyle.fontVariant", "discretionary-ligatures small-caps");

style.fontVariantNumeric = "proportional-nums";
shouldBeEqualToString("style.fontVariant", "");
shouldBeEqualToString("computedStyle.fontVariant", "discretionary-ligatures small-caps proportional-nums");

style.fontVariantEastAsian = "ruby";
// The |style.fontVariant| shorthand is set when all currently supported
// sub-properties are set.
shouldBeEqualToString("style.fontVariant", "discretionary-ligatures small-caps proportional-nums ruby");
shouldBeEqualToString("computedStyle.fontVariant", "discretionary-ligatures small-caps proportional-nums ruby");

style.fontVariantCaps = "normal";
shouldBeEqualToString("style.fontVariant", "discretionary-ligatures proportional-nums ruby");
shouldBeEqualToString("computedStyle.fontVariant", "discretionary-ligatures proportional-nums ruby");

style.fontVariantCaps = "small-caps";
style.fontVariantLigatures = "normal";
shouldBeEqualToString("style.fontVariant", "small-caps proportional-nums ruby");
shouldBeEqualToString("computedStyle.fontVariant", "small-caps proportional-nums ruby");

style.fontVariantNumeric = "normal";
shouldBeEqualToString("style.fontVariant", "small-caps ruby");
shouldBeEqualToString("computedStyle.fontVariant", "small-caps ruby");

style.fontVariantLigatures = "none";
shouldBeEqualToString("style.fontVariant", "no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual small-caps ruby");
shouldBeEqualToString("computedStyle.fontVariant", "no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual small-caps ruby");

style.fontVariantCaps = "initial";
style.fontVariantLigatures = "initial";
style.fontVariantNumeric = "initial";
style.fontVariantEastAsian = "initial";
shouldBeEqualToString("style.fontVariant", "initial");

document.body.removeChild(testContainer);
</script>
</body>
